<!DOCTYPE html>
<!-- JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应 -->

<!--查找html元素的三种方法-->
<!-- 通过 id 找到 HTML 元素
通过标签名找到 HTML 元素  x.getElementsByTagName("p")
通过类名找到 HTML 元素 -->
<html>

<head>
    <meta charset="utf-8" />
    <script>
        function myFunction(x) {
            x.style.background = "yellow";
        }
    </script>
    <script>
        function mymessage() {
            alert("这段消息由 onload 事件触发");
        }
    </script>
    <script>
        function changetext(id) {
            id.innerHTML = "谢谢!";
        }
    </script>

    <script>
        function myFunction() {
            var x = document.getElementById("fname");
            x.value = x.value.toUpperCase();
        }
    </script>

    <script>
        function mOver(obj) {
            obj.innerHTML = "谢谢"
        }

        function mOut(obj) {
            obj.innerHTML = "把鼠标移到上面"
        }
    </script>
</head>

<body onload="mymessage()">

    <p id="p1">Hello World!</p>
    <!-- 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
    如需改变 HTML 元素的内容，请使用这个语法： -->
    <script>
        document.getElementById("p1").innerHTML = "New text!";
    </script>

    <p>上面的段落被一条 JavaScript 脚本修改了。</p>
    <script>
        document.write(Date());
    </script>
    <!-- 如需改变 HTML 元素的属性，请使用这个语法  document.getElementById(id).attribute=new value -->
    <img id="image" src="../resource.abc.jpg">

    <script>
        document.getElementById("image").src = "../resource.abc.jpg";
    </script>

    <p id="p2">Hello World!</p>
    <!-- 如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.property=new style -->
    <script>
        document.getElementById("p2").style.color = "blue";
    </script>

    <h1 onclick="changetext(this)">请点击该文本</h1>

    请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
    <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
</body>

请输入英文字符：<input type="text" onfocus="myFunction(this)">

<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>


</html>